<div class="content-margin edit-pull-replication-sink-task edit-ongoing-task">
    <form class="flex-form" data-bind="submit: saveTask" autocomplete="off">
        <div class="align-items-center justify-content-between d-flex gap-2 margin-bottom-md padding-top-xs">
            <div class="flex-horizontal gap-2">
                <i class="icon-pull-replication-agent"></i>
                <h2 data-bind="text: $root.isAddingNewTask() ? `New Replication Sink` : `Edit Replication Sink`" class="mb-0"></h2>
                <span class="badge license-restricted-badge professional" data-bind="if: !hasPullReplicationAsSink">Professional +</span>
            </div>
            <div class="flex-end margin-right-xs" data-bind="react: $root.infoHubView"></div>
        </div>
        <div class="row flex-row">
            <div class="col-xs-12 col-lg-6 flex-vertical">
                <div class="flex-header flex-horizontal">
                    <span data-placement="right" data-toggle="tooltip" data-html="true" data-animation="true"
                        data-bind="tooltipText: $root.hasPullReplicationAsSink ? null : `<div class='padding'>Your current license does not support this feature.<br /><a href='https://ravendb.net/l/FLDLO4' target='_blank'>Upgrade your plan</a> to access.</div>`">
                        <button type="submit" class="btn btn-primary"
                            data-bind="disable: $root.spinners.save() || !$root.dirtyFlag().isDirty(), css: { 'btn-spinner': $root.spinners.save }">
                            <i class="icon-save"></i><span>Save</span>
                        </button>
                    </span>
                    <button data-bind="click: cancelOperation" class="btn btn-default margin-left-xxs" title="Return to Ongoing Tasks View">
                        <i class="icon-cancel"></i><span>Cancel</span>
                    </button>
                    <div class="flex-separator"></div>
                    <div class="input-group file-input" title="Import configuration from the configuration file created on the Hub">
                        <input type="file" id="configurationFilePicker" 
                               data-bind="event: { change: _.partial($root.onConfigurationFileSelected, $element) }" tabindex="-1" accept=".json" />
                    </div>
                    <label for="configurationFilePicker" class="btn btn-default" data-bind="visible: !canDefineCertificates, css: { 'pe-none item-disabled': !$root.hasPullReplicationAsSink }">
                        <i class="icon-import"></i><span>Import configuration from Hub</span>
                    </label>
                </div>
                <div class="panel" data-bind="css: { 'pe-none item-disabled': !$root.hasPullReplicationAsSink }">
                    <div class="panel-body" data-bind="with: editedSinkTask">
                        <div class="form-group margin-top" data-bind="validationElement: taskName">
                            <label for="taskName" class="control-label">Sink Task Name</label>
                            <div class="flex-grow">
                                <input type="text" class="form-control" data-bind="textInput: taskName" id="taskName"
                                       placeholder="Enter a descriptive name for the Sink task (optional)" />
                            </div>
                        </div>
                        <div class="form-group" data-bind="validationElement: hubName">
                            <label class="control-label">Hub Task Name</label>
                            <div class="flex-grow">
                                <input type="text" class="form-control" data-bind="textInput: hubName"
                                       placeholder="Enter the Replication Hub task name" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Task State</label>
                            <div class="flex-grow">
                                <button type="button" class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown" aria-expanded="false">
                                    <span data-bind="text: stateText()"></span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#" data-bind="click: _.partial($root.setState, 'Enabled')"><span>Enabled</span></a></li>
                                    <li><a href="#" data-bind="click: _.partial($root.setState, 'Disabled')"><span>Disabled</span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group margin-bottom margin-bottom-xs">
                            <label class="control-label">&nbsp;</label>
                            <div class="toggle" data-placement="right" data-toggle="tooltip" data-bind="attr: { title: $root.db.isSharded() ? 'Not supported in sharded databases' : 'Toggle on to set a responsible node for the task'  }"
                                 data-animation="true">
                                <input id="responsibleNode" type="checkbox" data-bind="checked: manualChooseMentor, disable: $root.possibleMentors().length === 0 || $root.db.isSharded()">
                                <label for="responsibleNode">Set responsible node</label>
                            </div>
                        </div>
                        <div data-bind="compose: $root.taskResponsibleNodeSectionView"></div>
                        <div class="form-group margin-bottom margin-bottom-xs margin-top" data-bind="validationElement: replicationMode">
                            <label class="control-label">&nbsp;</label>
                            <div class="flex-vertical">
                                <div class="toggle">
                                    <input id="allowHubToSink" type="checkbox" data-bind="checked: allowReplicationFromHubToSink" />
                                    <label for="allowHubToSink">Allow replication from Hub to Sink</label>
                                </div>
                                <div class="toggle">
                                    <input id="allowSinkToHub" type="checkbox" data-bind="checked: allowReplicationFromSinkToHub" />
                                    <label for="allowSinkToHub">Allow replication from Sink to Hub</label>
                                </div>
                                <div class="help-block" data-bind="validationMessage: replicationMode"></div>
                            </div>
                        </div>
                        <div class="form-group margin-top">
                            <label class="control-label">&nbsp;</label>
                            <div class="toggle">
                                <input id="createNewString" type="checkbox" data-bind="checked: $root.createNewConnectionString" />
                                <label for="createNewString">Create a new RavenDB connection string</label>
                            </div>
                        </div>
                        <div data-bind="collapse: $root.createNewConnectionString, with: $root.newConnectionString">
                            <div class="form-group">
                                <div class="flex-grow" data-bind="compose: $root.connectionStringView"></div>
                            </div>
                        </div>
                        <div class="form-group" data-bind="validationOptions: { insertMessages: false }, validationElement: connectionStringName, visible: !$root.createNewConnectionString()">
                            <label class="control-label">Connection String</label>
                            <div class="flex-grow">
                                <button class="btn btn-block dropdown-toggle text-left" type="button" data-toggle="dropdown"
                                        data-bind="textInput: connectionStringName, disable: $root.ravenEtlConnectionStringsDetails().length === 0,
                                                   attr: { 'title': $root.ravenEtlConnectionStringsDetails().length === 0 ? 'No connection strings were defined' : 'Select a connection string' }">
                                    <span data-bind="text: connectionStringName() || 'Select a connection string'"></span>
                                    <span class="caret dropdown-toggle" data-toggle="dropdown"></span>
                                </button>
                                <ul class="dropdown-menu"
                                    data-bind="foreach: $root.ravenEtlConnectionStringsDetails">
                                    <li data-bind="click: _.partial($root.useConnectionString, $data.Name)">
                                        <a href="#">
                                            <div class="row">
                                                <strong class="col-xs-7" data-bind="text: $data.Name"></strong>
                                                <small class="col-xs-2">Destination DB:</small>
                                                <small class="col-xs-3" data-bind="text: $data.Database"></small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <span class="help-block" data-bind="validationMessage: connectionStringName"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div data-bind="if: createNewConnectionString">
                            <div class="panel-addon" data-bind="with: testConnectionResult">
                                <div class="padding bg-success small" data-bind="visible: Success">
                                    <div>Successfully connected to node</div>
                                </div>
                                <div data-bind="if: !Success">
                                    <div class="padding bg-danger small">
                                        <h2>Connection test failed!</h2>
                                        <span data-bind="text: $root.fullErrorDetailsVisible() ? Error : $root.shortErrorText()"></span>
                                        <div>
                                            <a href="#" data-bind="click: $root.fullErrorDetailsVisible.toggle.bind($root.fullErrorDetailsVisible), text: $root.fullErrorDetailsVisible() ? 'hide details' : 'show details'"></a>
                                        </div>
                                    </div>
                                    <div class="padding bg-info small">
                                        <h2>About this error</h2>
                                        <div>Each RavenDB server has both HTTP and TCP endpoints. While the first one is used for system management and client-server rest request, the second is used for inter-server and advanced client-server communications.</div>
                                        <div>The connection tests the TCP endpoint only after a successful HTTP connection.</div>
                                        <div data-bind="visible: HTTPSuccess">It appears that the current server was able to connect to the desired server through HTTP, but failed connecting to it using TCP.</div>
                                        <div data-bind="visible: !HTTPSuccess">It appears that the current server could not connect to the desired node through HTTP.</div>
                                        <div>
                                            Please verify that:
                                            <ul>
                                                <li>The URL is correct</li>
                                                <li>Both RavenDB and the target machine are up and running</li>
                                                <li>There are no firewall settings on either machine blocking usage of that URL</li>
                                                <li>There are no network configurations that prevent communication</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-addon" data-bind="visible: ravenEtlConnectionStringsDetails().length === 0 && !createNewConnectionString()">
                            <div class="padding bg-warning small">
                                <i class="icon-warning"></i>&nbsp;&nbsp;No connection strings have been defined yet
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-lg-6 margin-top" data-bind="with: editedSinkTask, css: { 'pe-none item-disabled': !$root.hasPullReplicationAsSink }">
                <div class="flex-horizontal">
                    <div class="flex-separator"></div>
                    <label for="configurationFilePicker" class="btn btn-default margin-top" data-bind="visible: $root.canDefineCertificates" title="Import configuration from the configuration file created on the Hub">
                        <i class="icon-import"></i><span>Import configuration from Hub</span>
                    </label>
                </div>
                <div class="panel margin-top" data-bind="if: $root.canDefineCertificates">
                    <div class="panel-body">
                        <h3 class="margin-top">Replication Access</h3>
                        <div class="margin-top" data-bind="with: replicationAccess">
                            <div class="form-group margin-top" data-bind="validationElement: replicationAccessName">
                                <label class="control-label">Access Name</label>
                                <div class="flex-grow">
                                    <input type="text" class="form-control" data-bind="textInput: replicationAccessName"
                                           placeholder="Enter a name for the Replication Access" />
                                </div>
                            </div>
                            <hr>
                            <div class="form-group margin-top">
                                <label class="control-label ">Certificate Source</label>
                                <div class="btn-group ">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Select certificate source">
                                        <span data-bind="text: certificateSourceText"></span>&nbsp;&nbsp;
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#" data-bind="text: 'Provide your own certificate', click: _.partial(useServerCertificate, false)"></a></li>
                                        <li><a href="#" data-bind="text: 'Use the server certificate', click: _.partial(useServerCertificate, true)"></a></li>
                                    </ul>
                                </div>
                                <small id="sink-certificate-info" class="margin-left margin-left-sm margin-top margin-top-sm" data-toggle="tooltip" data-placement="bottom"><i class="icon-info text-info"></i></small>
                                <div class="flex-separator"></div>
                                <button type="button" class="btn btn-default" id="download-server-certificate" data-toggle="tooltip" data-placement="left"
                                        data-bind="visible: serverCertificateSelected, click: $root.downloadServerCertificate">
                                    <i class="icon-export"></i><span>Download</span>
                                </button>
                            </div>
                            <div data-bind="if: !certificate()">
                                <div class="form-group">
                                    <label class="control-label">
                                        Certificate File
                                    </label>
                                    <div class="input-group file-input flex-grow" data-bind="validationElement: certificateExtracted">
                                        <input type="file" name="uploadFile" id="uploadFile" accept="" data-bind="event: { change: _.partial($root.certFileSelected, $element) }" />
                                        <span class="static-name form-control" data-bind="text: selectedFileName() || 'Upload *.pfx, or import configuration from Hub'"></span>
                                        <span class="input-group-btn">
                                            <label for="uploadFile" class="btn btn-default"><i class="icon-document"></i><span>Browse</span></label>
                                        </span>
                                        <p class="help-block" data-bind="validationMessage: certificateExtracted"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">
                                        Certificate Passphrase
                                    </label>
                                    <input class="form-control margin-bottom" type="password" data-bind="textInput: selectedFilePassphrase" />
                                </div>
                            </div>
                            <div data-bind="if: certificate">
                                <div class="form-group">
                                    <label class="control-label">
                                        Certificate
                                    </label>
                                    <div class="panel certificate-item flex-grow margin-top margin-top-xs">
                                        <div class="padding padding-sm flex-horizontal">
                                            <div title="Certificate thumbprint">
                                                <i class="icon-certificate"></i><span data-bind="text: certificate().thumbprint()"></span>
                                            </div>
                                            <div class="flex-separator"></div>
                                            <button type="button" class="btn btn-sm btn-danger" title="Remove certificate"
                                                    data-bind="visible: !serverCertificateSelected(), click: _.partial($root.removeCertificate, $data)"> 
                                                <i class="icon-trash"></i>
                                            </button>
                                        </div>
                                        <div class="panel-addon padding padding-sm">
                                            <div class="flex-horizontal">
                                                <span class="notBefore">
                                                    <span class="margin-right margin-right-sm"><i class="icon-generation"></i><span>Valid From</span></span>
                                                    <strong data-bind="text: certificate().validFromText()"></strong>
                                                </span>
                                                <span class="expiration margin-left">
                                                    <span class="margin-right margin-right-sm"><i data-bind="attr: { class: certificate().expirationIcon }"></i><span>Expiration</span></span>
                                                    <strong data-bind="attr: { class: certificate().expirationClass }, text: certificate().expirationText"></strong>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="margin-bottom margin-top">
                                <hr>
                                <div class="margin-bottom">
                                    <h3>Filter Replicated Documents by ID Paths</h3>
                                </div>
                                <div class="form-group" data-bind="validationElement: inputPrefixHubToSink().path">
                                    <label for="hubToSink" class="control-label">From Hub to Sink
                                        <small id="hub-to-sink-info" class="margin-left margin-left-sm" data-toggle="tooltip" data-placement="bottom"><i class="icon-info text-info"></i></small>
                                    </label>
                                    <div class="flex-grow" id="hubToSink" data-bind="validationElement: hubToSinkPrefixes">
                                        <div class="flex-horizontal">
                                            <div class="flex-grow">
                                                <input type="text" class="form-control" placeholder="Enter documents ID path. Use <path>/* for all child paths." data-bind="textInput: inputPrefixHubToSink().path" />
                                            </div>
                                            <button class="btn btn-info"
                                                    data-bind="click: addHubToSinkInputPrefixWithBlink, enable: inputPrefixHubToSink && inputPrefixHubToSink().path() && inputPrefixHubToSink().path.isValid()">
                                                <i class="icon-plus"></i><span>Add Path</span>
                                            </button>
                                        </div>
                                        <div data-bind="visible: hubToSinkPrefixes().length" class="margin-top">
                                            <ul class="well collection-list" data-bind="foreach: hubToSinkPrefixes">
                                                <li>
                                                    <div class="name" data-bind="text: $data.path()"></div>
                                                    <a title="Remove prefix path" href="#" data-bind="click: $parent.removePrefixPathHubToSink.bind($parent, $data.path())"><i class="icon-trash"></i></a>
                                                </li>
                                            </ul>
                                        </div>
                                        <span class="help-block" data-bind="validationMessage: hubToSinkPrefixes"></span>
                                        <div class="padding padding-xs text-warning bg-warning" data-bind="visible: hasSingleDocumentPattern(hubToSinkPrefixes())">
                                            <small><i class="icon-warning"></i><span data-bind="text: getSingleDocumentPatternWarning()"></span></small>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group margin-top">
                                    <label class="control-label">&nbsp;</label>
                                    <div class="toggle">
                                        <input id="useStuff" type="checkbox" data-bind="checked: samePrefixesForBothDirections" />
                                        <label for="useStuff">Use above paths (<i>Hub to Sink</i>) for both directions</label>
                                    </div>
                                </div>
                                <div class="form-group margin-bottom" data-bind="validationElement: inputPrefixSinkToHub().path">
                                    <label for="sinkToHub" class="control-label">From Sink to Hub
                                        <small id="sink-to-hub-info" class="margin-left margin-left-sm" data-toggle="tooltip" data-placement="bottom"><i class="icon-info text-info"></i></small>
                                    </label>
                                    <div class="flex-grow" id="sinkToHub" data-bind="collapse: !samePrefixesForBothDirections(), validationElement: sinkToHubPrefixes">
                                        <div class="flex-horizontal">
                                            <div class="flex-grow">
                                                <input type="text" class="form-control" placeholder="Enter documents ID path. Use <path>/* for all child paths." data-bind="textInput: inputPrefixSinkToHub().path" />
                                            </div>
                                            <button class="btn btn-info"
                                                    data-bind="click: addSinkToHubInputPrefixWithBlink, enable: inputPrefixSinkToHub && inputPrefixSinkToHub().path() && inputPrefixSinkToHub().path.isValid()">
                                                <i class="icon-plus"></i><span>Add Path</span>
                                            </button>
                                        </div>
                                        <div data-bind="visible: sinkToHubPrefixes().length" class="margin-top">
                                            <ul class="well collection-list" data-bind="foreach: sinkToHubPrefixes">
                                                <li>
                                                    <div class="name" data-bind="text: $data.path()"></div>
                                                    <a title="Remove prefix path" href="#" data-bind="click: $parent.removePrefixPathSinkToHub.bind($parent, $data.path())"><i class="icon-trash"></i></a>
                                                </li>
                                            </ul>
                                        </div>
                                        <span class="help-block" data-bind="validationMessage: sinkToHubPrefixes"></span>
                                        <div class="padding padding-xs text-warning bg-warning" data-bind="visible: hasSingleDocumentPattern(sinkToHubPrefixes())">
                                            <small><i class="icon-warning"></i><span data-bind="text: getSingleDocumentPatternWarning()"></span></small>
                                        </div>
                                    </div>
                                    <div data-bind="visible: samePrefixesForBothDirections">
                                        <div class="form-control-static">Same as <i>Hub to Sink</i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<form id="certificates_download_form" target="certificate_download_iframe" style="display: none"></form>

<iframe name="certificate_download_iframe" style="display: none"></iframe>
